<template>
  <div class="demo">
    <div class="demo-title">高亮</div>
    <div class="demo-content">
      <TreeSelect
        v-model:value="value"
        v-model:searchValue="searchValue"
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        tree-default-expand-all
        :tree-data="treeData"
        tree-node-filter-prop="label"
      >
        <template #title="{ value: val, label }">
          <b v-if="val === 'ssc'" style="color: #08c">ssc</b>
          <template v-else>
            <template
              v-for="(fragment, i) in label
                .toString()
                .split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
            >
              <span
                v-if="fragment.toLowerCase() === searchValue.toLowerCase()"
                :key="i"
                style="color: #08c"
              >
                {{ fragment }}
              </span>
              <template v-else>{{ fragment }}</template>
            </template>
          </template>
        </template>
      </TreeSelect>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import TreeSelect from '@sscd/tree-select';
  import type { TreeSelectProps } from '@sscd/tree-select';
  const searchValue = ref('');
  const value = ref<string>();
  watch(value, () => {
    console.log(value.value);
  });
  const treeData = ref<TreeSelectProps['treeData']>([
    {
      label: 'parent 1',
      value: 'parent 1',
      children: [
        {
          label: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            { label: 'my leaf', value: 'leaf1' },
            { label: 'your leaf', value: 'leaf2' },
          ],
        },
        { label: 'ssc', value: 'ssc' },
      ],
    },
  ]);
</script>
